/*
 * Peaksel style
 *
 * This CSS is using Sass (SCSS) : http://sass-lang.com/
 *
 * Sections
 *    -> General
 *    -> Home
 *    -> Lateral panel
 *    -> Ad
 *    -> Offer
 *    -> Search
 *    -> Header
 *    -> Footer
 */

/*
 * General
 */

section.main_content {
  padding : 0 2em;
  display : table-cell;
  width : 82%;
  /* box-shadow : 3px 3px 4px -2px rgba(0, 0, 0, 0.5); */
  border-right: 1px solid #E5E5E5;

  form {
    margin-top : 3em;

    div.field_with_errors {
      display : inline;
    }

    fieldset {
      padding : 2em;
      border : 1px solid #f1f1f1;
      width : 700px;
      margin-bottom : 2em;

      legend {
        font-variant : small-caps;
        font-size : 1.2em;
        color : #DD4B39;
      }
    }

    label {
      width : 200px;
      display : inline-block;
      margin-right : 4em;
    }
    input {
      margin-bottom : 1em;
    }
    input[type="submit"] {
      margin : 1em 0 0 63%;
    }
    textarea {
      width : 290px;
      height : 72px;
    }
    img {
      margin : 3em 25%;
    }
  }
}
section.board {
    article {
    width : 220px;
    float : left;
    margin : 1em;
  }
}

/*
 * Lateral panel
 */

article, aside.lateral_panel {
  header {
    margin-bottom : 2em;

    h1 {
      font-size : 1.2em;
      color : #dd4b39;

      a, a:link, a:visited {
        text-decoration : none;
        color : #dd4b39;
      }
    }
    p {
      margin : 0;
      color : #333;
    }
  }
  p {
    a {
      text-decoration : none;
      color : #000;
      font-variant:small-caps;
    }
  }
  a:hover {
    text-decoration : underline;
    color : #333;
  }
}
aside.lateral_panel {
  padding : 0 2em;
  display : table-cell;
  vertical-align : top;
}

/*
 * Ad
 */

section.main_content.ad {
  article {
    width : 80%;
    border-bottom : 1px solid #E5E5E5;
    margin-top : 1em;
    padding-bottom : 3em;

    header, p {
      margin-left : 28em;
      padding-top : 1em;
      width : 50%;
    }
    p.content {
      margin : 0 3em;
      width : 100%;
    }

    figure {
      float : left;
      figcaption {
        font-size : small;
        text-align : center;
        width : 300px;
      }
    }
  }
  aside {
    float : right;
    width : 20%;
    background-color : #f1f1f1;
    border : 1px solid #E5E5E5;
    margin-top : 6em;

    p {
      text-align : center;
    }
  }
}

/*
 * Offer
 */

article#offer
{
  border : none;
  padding-bottom : 0;

  header, p {
    margin-left : 10em;
  }
}
aside#offer {
  float : none;
  background : none;
}

/*
 * Search
 */

.search {
  background-color : #f1f1f1;

  -moz-border-radius : 5px 5px 0px 0px;
  -webkit-border-radius : 5px 5px 0px 0px;
  -o-border-radius : 5px 5px 0px 0px;
  -ms-border-radius : 5px 5px 0px 0px;
  border-radius : 5px 5px 0px 0px;

  padding : 0.5em 2em 0 2em;
  min-height : 17em;
  border-bottom: 1px solid #E5E5E5;

  form {
    display : table;
    width : 100%;

    div {
      display : table-cell;
      width : 50%;

      p {
        width : 40%;
        float : left;
      }
    }
    input[type="submit"] {
      margin : 2em 0 1em 60%;
    }
  }
}

/*
 * Header
 */

header.main {
  background: -moz-linear-gradient(center top , #333333, #111111) repeat scroll 0 0 transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  height : 3em;
  margin-bottom : 3em;

  h1 {
    font-weight : normal;
    margin-left : 7em;
    padding-top : 5px;
  }

  p {
    float : right;
    margin-right : 2.4em;

    img {
      display : inline-block;
      margin-right : 1em;
    }
  }
  nav {
    width : 63%;
    float : right;

    ul {
      li {
        display : inline-block;
        margin-right : 1em;
      }
    }
  }

  a {
    color : #fff;
    text-decoration : none;
  }
}

/*
 * Footer
 */

footer.main {
  margin-top : 4em;

  h1 {
    float : left;
    border-right: 1px solid #E5E5E5;
    height : 1em;
    padding : 1em;
    margin-right : 1em;
  }
  p {
    display : inline;
  }
  nav {
    padding-top : 2em;

    ul {
      li {
        display : inline-block;
        margin-right : 1em;
      }
    }
  }
  a, a:visited, a:link {
    color : #333;
    text-decoration : none;
  }
  a:hover {
    text-decoration : underline;
  }
}
